<template>
	<view class="">
		<u-navbar :borderBottom="false" back-text=" " :title="title"></u-navbar>
		<view class="refund_box">
			<u-steps mode="number" :list="refund_list" active-color="#6993b7" :current="current"></u-steps>
		</view>
		<view v-if="type==0" class="">
			<view @click="Handling_method_show=true" class="select_item">
				<view  class="select_item_left">
					<span style="color: red;margin-right: 5rpx;">*</span>
					<span>处理方式:</span>
				</view>
				<view class="select_item_right">
					<span style="">{{Handling_method_text}}</span>
				</view>
			</view>
			<u-gap height="20" bg-color="#f5f5f5"></u-gap>
			<view @click="Reason_refund_show=true" class="select_item">
				<view class="select_item_left">
					<span style="color: red;margin-right: 5rpx;">*</span>
					<span>退款原因:</span>
				</view>
				<view class="select_item_right">
					<span style="">{{Reason_refund_text}}</span>
				</view>
			</view>
			<u-gap height="20" bg-color="#f5f5f5"></u-gap>
			<!-- <view class="select_item">
				<view class="select_item_left">
					<span style="color: red;margin-right: 5rpx;">*</span>
					<span>退款金额:</span>
				</view>
				<view class="select_item_right">
					<input type="number" @blur="pic_change" disabled="true" v-model="refund_mum" style="font-size: 24rpx;" :placeholder="`最多可退款${price}元`" />
				</view>
			</view> -->
			
			<view class="select_item">
				<view class="select_item_left">
					<span style="color: red;margin-right: 5rpx;">*</span>
					<span>退货数量:</span>
				</view>
				<view class="select_item_right">
					<input type="number" @input="handleInput" @blur="input_blur" v-model="Quantity_goods" style="font-size: 24rpx;" :placeholder="`请输入退货数量`" />
				</view>
			</view>
			<!-- <u-gap height="20" bg-color="#f5f5f5"></u-gap>
			<view class="select_item" v-if="Reason_refund_num == 5">
				<u-input v-model="desc" type="textarea" placeholder="请输入退款原因" :border="false" height="300" :auto-height="false" />
			</view> -->
			<view class="refund_submit_box">
				<u-button @click="onSubmit()" class="btns2" :custom-style="{'background':'#6993b7' ,color:'#fff'}"   :hair-line="false" :ripple="true" ripple-bg-color="rgba(9, 82, 200, 0.15)">提交退款申请</u-button>
			</view>
		</view>
		<view v-else class="tuikuaning">
			<view class="">
				<u-icon name="info-circle-fill" color="#44a5cd" size="42"></u-icon>
			</view>
			<view class="tuikuaning_text">
				<span class="tuikuaning_text_title">等待商家处理退款申请</span>
				<span>如商家同意,退款申请将达成并退款至您的支付宝账号或银行卡中。</span>
			</view>
		</view>
	
		<!-- 处理方式 -->
		<u-action-sheet :list="Handling_method" @click="Handling_method_Change" v-model="Handling_method_show"></u-action-sheet>
		<!-- 退款原因列表 -->
		<u-action-sheet :list="Reason_refund" @click="Reason_refund_Change" v-model="Reason_refund_show"></u-action-sheet>
	</view>
</template>

<script>
    export default {
        data() {
            return {
				desc:"",
				max_num:null,
				Quantity_goods:null , //退货数量
				order_goods_spec_id:null,
				price:0,
				refund_mum:'',//退款金额
				order_id:0,//订单id
				title:'申请退款',
				type:null,
				current:0,//退款进度
				refund_list:[],
				Handling_method_text:'请选择处理方式',
				Handling_method_show:false,//处理方式列表显示隐藏
				Handling_method_num:null, //选择的处理方式
				Handling_method:[ //处理方式列表
					{text: '退货退款'},
					{text: '退款不退货'},
				],
				Reason_refund_text:'请选择退款原因',
				Reason_refund_num:null, //选中的退款原因
				Reason_refund_show:false,//退款原因展示
				Reason_refund:[//退款原因列表
					{text: '买/卖双方协商一致'},
					{text: '买错/买多/不想要'},
					{text: '商品质量问题'},
					{text: '未收到货品'},
					{text: '其他'}
				],
				info:{} ,// 退款详情
			}
        },
        methods: {
           
        },
		onShow() {
			
		},
		onLoad(params){
			this.order_id = params.id
			this.price = Number(params.price)
			this.type = Number(params.type)
			this.refund_mum = Number(params.refund_mum)
			this.Quantity_goods = Number(params.num)
			this.max_num = Number(params.num)
			this.order_goods_spec_id = Number(params.order_goods_spec_id)
			if(this.type == 1){
				this.title = '退款进度'
				this.getGoodsOrder_apply_refund_detail()
			}else{
				this.title = '申请退款'
				this.refund_list = [//退款进度列表
					{name:'买家申请退款'},
					{name:'商家处理中'},
					{name:'退款完成'},
				]
			}
			 // 0 申请退款 1 查看退款
		},
		mounted() {
			
		},
		methods: {
			handleInput(e) {
				// 正整数方法
			  // 1. 过滤非数字字符（包括小数点、负号等）
			  let value = e.detail.value.replace(/[^0-9]/g, '');
			  // 2. 可选：防止以 0 开头（如 01, 02...），除非输入就是 "0"
			  if (value.length > 1 && value[0] === '0') {
			    value = value.replace(/^0+/, '');
			  }
			  this.Quantity_goods = value;
			},
			input_blur(e){
				let value = e.detail.value.replace(/[^0-9]/g, '');
				if(value > this.max_num){
					this.Quantity_goods = this.max_num
				}
			},
			getGoodsOrder_apply_refund_detail(){
				 var data = {
					 id:this.order_id
				 }
				 this.$gugoApi.GoodsOrder_apply_refund_detail(data).then(res=>{
					 // console.log(res , '----------')
					 if(res.data.status==0){
						this.current = 1
						this.refund_list = [//退款进度列表
							{name:'买家申请退款'},
							{name:'商家处理中'},
							{name:'退款完成'},
						]
					 }
					 if(res.data.status==1){
					 	this.current = 2
						// this.refund_list[2].text = '退款完成'
						this.refund_list = [//退款进度列表
							{name:'买家申请退款'},
							{name:'商家处理中'},
							{name:'退款完成'},
						]
					 }
					 if(res.data.status==2){
					 	this.current = 2
						this.refund_list = [//退款进度列表
							{name:'买家申请退款'},
							{name:'商家处理中'},
							{name:'已拒绝'},
						]
					 }
					 if(res.data.status==3){
					 	this.current = 2
						this.refund_list = [//退款进度列表
							{name:'买家申请退款'},
							{name:'商家处理中'},
							{name:'已取消'},
						]
					 }
				 })
			},
			pic_change(e){
				
				if(Number(e.detail.value) > Number(this.price)){
					this.refund_mum = Number(this.price)
					// console.log(this.refund_mum)
					this.$forceUpdate()
				}
			},
			Reason_refund_Change(index){
				 this.Reason_refund_text =  this.Reason_refund[index].text
				this.Reason_refund_num = index+1
			},
			Handling_method_Change(index){
				// 处理方式选择
				this.Handling_method_text =  this.Handling_method[index].text
				this.Handling_method_num = index+1
			},
			onSubmit(){
				if(!this.Handling_method_num){
					uni.showToast({
						title:'请选择处理方式',
						icon:'none'
					})
					return
				}
				if(!this.Reason_refund_num){
					uni.showToast({
						title:'请选择退款理由',
						icon:'none'
					})
					return
				}
				// if(this.Reason_refund_num == 5 && !this.desc){
				// 	uni.showToast({
				// 		title:'请输入其他退款原因',
				// 		icon:'none'
				// 	})
				// 	return
				// }
				if(!this.Quantity_goods){
					uni.showToast({
						title:'请输入退货数量',
						icon:'none'
					})
					return
				}
				
				var data = {
					"id": this.order_id,
					'order_goods_spec_id':this.order_goods_spec_id,
					"apply_type": this.Handling_method_num, //处理方式 1退货退款2退款不退货
					"apply_reason": this.Reason_refund_num, //退款理由 1买/卖双方协调一致2买错/买多/不想要3商品质量问题4未收到货品5其他
					'num':Number(this.Quantity_goods),
				}
				this.$wqzApi.shop_order_application_refund(data).then(res=>{
					uni.showToast({
						title:'提交成功',
						icon:'none'
					})
					this.current = 1
					setTimeout(()=>{
						uni.navigateBack()
					})
				})
			},
		}
    }
</script>

<style lang="scss">
 @import url(./refund.scss);
</style>